<template>
  <div class="dashboard-container">
    <el-row type="flex" justify="space-between" align="center">
      <el-col :span="14">
        <el-card class="el-card-left">
          <p class="title">机构概述</p>
          <el-row type="flex" justify="space-between">
            <el-col>
              <div class="adress">
                <p>地址：</p>
                <p class="top">负责人：</p>
              </div>
              <div class="distribution">查看营业部分布</div>
            </el-col>
            <el-col>
              <div class="right">
                <el-row type="flex" justify="space-between">
                  <el-col>
                    <div>分拣中心(个) <span>1</span></div>
                    <div>司机人数(个) <span>4</span></div>
                  </el-col>
                  <el-col>
                    <div>营业部(个) <span>4</span></div>
                    <div>快递员人数(个) <span>4</span></div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="el-card-left top">
          <p class="title">
            待办任务
            <span
              style="font-size: 14px; color: #818693; font-weight: 400"
            ><i class="el-icon-refresh-right" /> {{ currentTime }} -
              {{ countTime }}
            </span>
          </p>
          <!-- echarts图表 -->

          <div

            id="chart-wrap"
            ref="Columnar"
            style="width 200px; height: 200px;"
          />
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card class="el-card-right">
          <p class="title">
            今日数据
            <span
              style="font-size: 14px; color: #818693 font-weight: 400"
            ><i class="el-icon-refresh-right" /> {{ currentTime }}
            </span>
          </p>
          <div>
            <el-row
              type="flex"
              justify="space-between"
              style="margin-left: 50px; margin-top: 50px"
            >
              <el-col>
                <p>订单金额(元)</p>
                <p>较昨日</p>
              </el-col>
              <el-col>
                <p>订单数量(笔)</p>
                <p>较昨日</p>
              </el-col>
              <el-col>
                <p>运输任务(次)</p>
                <p>较昨日</p>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="el-card-right top" />
      </el-col>
    </el-row>
    <el-card style="margin-top: 30px">
      <el-row type="flex" justify="space-between">
        <el-col class="item">
          <img
            src=""
            alt=""
          >
          <p>快递作业</p>
        </el-col>
        <el-col class="item">
          <img
            src=""
            alt=""
          >
          <p>运输任务</p>
        </el-col>
        <el-col class="item">
          <img
            src=""
            alt=""
          >
          <p>线路管理</p>
        </el-col>
        <el-col class="item">
          <img
            src=""
            alt=""
          >
          <p>车辆管理</p>
        </el-col>
        <el-col class="item">
          <img
            src="https://slwl-admin.itheima.net/static/img/useFeature5.cc8a9bb1.png"
            alt=""
          >
          <p>司机管理</p>
        </el-col>
        <el-col class="item">
          <img
            src="https://slwl-admin.itheima.net/static/img/useFeature6.67f8db98.png"
            alt=""
          >
          <p>运费查询</p>
        </el-col>
      </el-row>
    </el-card>
    <!-- 线路管理 -->
    <el-row type="flex" justify="space-between" style="margin-top: 30px">
      <el-col :span="12">
        <el-card class="card">
          <p class="title">线路管理</p>
        </el-card>

        <el-card class="card" style="margin-top: 30px">
          <p class="title">
            待办任务
            <span
              style="font-size: 14px; color: #818693; font-weight: 400"
            >2022-08 - 2023-01
            </span>
          </p>
          <p style="margin-top: 10px; color: #ccc">单位： 笔</p>
        </el-card>
      </el-col>
      <el-col :span="11">
        <el-card class="card">
          <p class="title">
            运输任务
            <span>查看更多 ></span>
          </p>
          <el-table style="margin-top: 20px">
            <el-table-column align="center" label="任务编号" />
            <el-table-column align="center" label="起始地" />
            <el-table-column align="center" label="目的地" />
            <el-table-column align="center" label="车辆" />
            <el-table-column align="center" label="任务状态" />
          </el-table>
        </el-card>
        <el-card class="card" style="margin-top: 30px">
          <p class="title">
            订单分布
            <span
              style="font-size: 14px; color: #818693; font-weight: 400"
            >2022-08 - 2023-01
            </span>
          </p>
          <p style="margin-top: 10px; color: #ccc">单位： 笔</p>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>
<script src='echarts-liquidfill.js'></script>
<script src='echarts.js'></script>
<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
// import { mapGetters } from 'vuex'
// import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {

  name: 'Dashboard',
  data() {
    return {
      currentTime: '',
      countTime: '',
      // 柱状图
      option2: {
        title: {
          text: '67',
          textStyle: {
            fontSize: 80,
            fontFamily: 'Microsoft Yahei',
            fontWeight: 'normal',
            color: '#ffffff',
            rich: {
              a: {
                fontSize: 28
              }
            }
          },
          x: 'center',
          y: '40%'
        },

        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            //  shape: 'roundRect',
            data: [0.6],
            backgroundStyle: {
              borderColor: 'rgba(0,150,255,0.4)', // 背景内边框
              color: 'rgba(0,150,255,0.4)' // 背景颜色
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 13,
                borderColor: 'rgba(0,150,255,0.2)'
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 1,
                  color: '#0CB8EA'
                },
                {
                  offset: 0.5,
                  color: '#0CB8EA'
                },
                {
                  offset: 0,
                  color: '#0CB8EA'
                }
              ],
              globalCoord: false
            },
            label: {
              normal: {
                formatter: ''
              }
            }
          }
        ]
      }
    }
  },
  created() {
    this.getTime()
  },
  mounted() {
    this.workList()
  },
  methods: {
    // 获取当前时间戳
    getTime() {
      // const time = Date.now()
      // console.log(time);
      // this.currentTime = moment(time).format('YYYY-MM-DD HH:mm:ss')
      // this.countTime = moment(time + 172800000).format('YYYY-MM-DD HH:mm:ss')
      console.log(this.countTime)
    },
    workList() {
      // 柱状图
      const echarts2 = echarts.init(this.$refs.Columnar)
      // 展示数据
      echarts2.setOption(this.option2)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  display: flex;
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.title {
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
.el-card-left {
  height: 235px;
  .distribution {
    margin-left: 20px;
    width: 157px;
    height: 40px;
    background-color: #ffeeeb;
    border-radius: 3px;
    border: #ff6b4a 1px solid;
    color: #e15536;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    margin-top: 30px;
    transition: all 0.2s;
    &:hover {
      background: #ff6b4a;
      color: #fff;
    }
  }
  .adress {
    padding: 0 20px;
    margin-top: 20px;
    color: #818693;
  }
  .right {
    margin-top: 30px;
    border-left: 1px solid #ebeef5;
    padding: 30px;
  }
}
.el-card-right {
  height: 233px;
}
.top {
  margin-top: 30px;
}
.item {
  height: 116px;
  width: 15.15%;
  background: #fafafb;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  line-height: 116px;
  img {
    width: 40px;
    height: 40px;
  }
  p {
    margin-top: -80px;
    font-weight: 700;
  }
  &:hover {
    color: #e15536;
  }
}
.card {
  height: 480px;
}
</style>

